<template>
  <section class="page-container-package" :class="fullPackage ? 'full' : ''">
    <section :id="`meta`" class="area">
      <h1 class="title">{{ title }}</h1>
      <div class="description" v-html="description"></div>
      <div class="md-desc-dec md-html" v-html="mdDescHtml"></div>
    </section>

    <section class="area demos">
      <h2>代码演示</h2>
      <demo-box
        v-for="(demo, index) of demos"
        :id="`demo-${demo.name}`"
        :key="demo.name"
        :class="`demo-box demo-box${index}`"
      >
        <template #title> {{ demo.title || `Demo${index + 1}` }} </template>
        <template #description>
          <div v-html="demo.desc || `Demo${index + 1}代码演示`"></div>
        </template>
        <template #view>
          <div class="preview" :style="{ 'background-image': `url(${phonePng})` }">
            <iframe :src="previewUrl" scrolling="no" />
          </div>
        </template>
        <template #code>
          <pre><code class="language-javascript">{{ demo.code }}</code></pre>
        </template>
      </demo-box>
      <div class="demos-phone-preview">
        <div class="button" @click="showQrcode()">
          点我~<br/>{{phoneQrcodeShow ? '关闭' : '手机'}}预览
        </div>
        <div class="qrcode" v-if="phoneQrcodeShow">
          <img :src="qrcode" />
        </div>
      </div>
    </section>

    <section class="area api">
      <h2 :id="`api`">API</h2>
      <div v-if="apiDocs.props?.length" class="api-box">
        <a-table
          :columns="[
            { title: '参数', dataIndex: 'name' },
            { title: '说明', dataIndex: 'desc' },
            { title: '类型', dataIndex: 'type' },
            { title: '默认值', dataIndex: 'default' },
          ]"
          :data-source="apiDocs.props"
          :pagination="false"
        />
      </div>
      <div v-if="apiDocs.slots?.length" class="api-box">
        <h3>插槽</h3>
        <a-table
          :columns="[
            { title: '名称', dataIndex: 'name' },
            { title: '说明', dataIndex: 'desc' },
          ]"
          :data-source="apiDocs.slots"
          :pagination="false"
        />
      </div>
      <div v-if="apiDocs.events?.length" class="api-box">
        <h3>事件</h3>
        <a-table
          :columns="[
            { title: '名称', dataIndex: 'name' },
            { title: '说明', dataIndex: 'desc' },
          ]"
          :data-source="apiDocs.events"
          :pagination="false"
        />
      </div>
      <div v-if="mdApiHtml" class="md-html md-api-doc" v-html="mdApiHtml"></div>
    </section>
  </section>
</template>

<script lang="ts" setup>
  import { onMounted, onUpdated, computed, ref, watch } from 'vue'
  import { useRoute } from 'vue-router'
  import axios from 'axios'
  import packages from '@/service/packages'
  import DemoBox from '@/components/demo-box.vue'
  import phonePng from '@/assets/image/phone.png'
  import QR from 'qrcode-base64'

  const route = useRoute();

  const fullPackage = computed(() => route.fullPath.indexOf('package-full') > -1)
  const apiDocs = ref<any>({});

  const packageName = computed(() => {
    return route.params.name as string;
  });

  const pkg = computed(() => {
    return packages[packageName.value];
  });

  const title = computed(() => {
    return pkg.value.title;
  });
  const description = computed(() => {
    return pkg.value.description;
  });

  const docHtml = computed(() => {
    return pkg.value.docHtml;
  });

  const demos = computed(() => {
    return pkg.value.demos;
  });

  const docHtmlList = computed(() => {
    return docHtml.value.split(/<h2>API<\/h2>/);
  });

  const mdApiHtml = computed(() => {
    return docHtmlList.value[1];
  });

  const mdDescHtml = computed(() => {
    return docHtmlList.value[0].replace(
      /<h2>(.+?)<\/h2>/g,
      (_s: string, s1: string) => `<h2 id="${s1}">${s1}</h2>`
    );
  });

  function highlight() {
    document.querySelectorAll('pre code').forEach((el: HTMLElement) => {
      (window as any).hljs.highlightElement(el);
    });
  }

  function getAPIDoc() {
    axios
      .get(
        `${import.meta.env.VITE_BASE_URL || ''}/packages/${packageName.value}/doc.json?${Date.now()}`
      )
      .then((res) => {
        apiDocs.value = res.data;
      });
  }

  const previewUrl = ref('')

  watch(
    () => route,
    (_, to) => {
      if (to && to.name === 'Package') getAPIDoc()
      const path = window.location.href.replace('package-full', 'preview')
      previewUrl.value = path.replace('package', 'preview')
    },
    { immediate: true, deep: true }
  )

  onMounted(() => {
    highlight();
    getAPIDoc();
  });
  onUpdated(highlight);

  const phoneQrcodeShow = ref(false)
  const showQrcode = () => {
    phoneQrcodeShow.value = !phoneQrcodeShow.value
    if (phoneQrcodeShow.value) initQrcode()
  }
  const qrcode = ref('')
  const initQrcode = () => {
    qrcode.value = QR.drawImg(previewUrl.value, {
      typeNumber: 4,
      errorCorrectLevel: 'M',
      size: 500
    })
  }

</script>
<style lang="less">
  .page-container-package {
    padding-right: 500px;
    .md-desc-dec {
      li {
        list-style: circle inside;
      }
    }
    .anchor {
      .ant-anchor {
        padding-top: 24px;
      }
    }
    .title {
      margin-top: 8px;
      margin-bottom: 20px;
      color: #000000d9;
      font-size: 26px;
      line-height: 38px;
    }
    h2 {
      font-size: 22px;
    }
    .demo-box {
      margin: 60px 0 0;
    }
    .demo-box0 {
      margin: 40px 0 0;
    }
    &.full {
      padding-top: 36px;
    }
  }

  .preview {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 24px 0 0 26px;
  }

  iframe {
    width: 375px;
    height: 812px;
    border-radius: 48px;
    display: block;
    overflow: hidden;
  }

  .demos-phone-preview {
    position: fixed;
    z-index: 10;
    top: 70px;
    right: 12px;
    width: 180px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    > .button {
      width: 76px;
      height: 48px;
      padding: 5px 0 0 12px;
      line-height: 18px;
      border-radius: 8px;
      font-size: 12px;
      background: var(--sscd-primary-color);
      color: #fff;
      cursor: pointer;
    }
    > .qrcode {
      width: 180px;
      height: 180px;
      margin-top: 6px;
      padding: 10px;
      background: #fff;
      border: 1px solid #eee;
      box-shadow: 0px 5px 8px 3px rgba(0, 0, 0, 0.5);
      > img {
        width: 160px;
        height: 160px;
      }
    }
  }
</style>
